<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div class="box">
        <input type="password" class="pass">
        <button>显示密码</button>
        <!-- <span class='text'><img src="./img/wrong.png" alt="" class="pic">密码格式错误</span>
        <span class='text'><img src="./img/right.png" alt="" class="pic">密码格式正确</span> -->
    </div>
    <script>
        window.onload = function () {
            let box = document.querySelector('.box');
            let ipt = document.querySelector('.pass');
            let btn = document.querySelector('button');
            // let pic = document.querySelector('.box .pic');
            // let text = document.querySelector('.pass .text');
            let regPassword = /^.{6,16}$/
            let num = 0;
            btn.addEventListener('click', function () {
                if (num == 0) {
                    ipt.type = 'text';
                    num = 1;
                }
                else {
                    ipt.type = 'password';
                    num = 0;
                }
            })
            ipt.addEventListener('blur', function () {
                let val = ipt.value
                if (regPassword.test(val)) {
                    let span = document.createElement('span');
                    span.innerHTML = `<span class='text'><img src="./img/right.png" alt="" class="pic">密码格式正确</span>`;
                    box.append(span);
                }
                else {
                    let span = document.createElement('span');
                    span.innerHTML = `<span class='text'><img src="./img/wrong.png" alt="" class="pic">密码格式错误</span>`;
                    box.append(span);
                }
            })
        }
    </script>
</body>

</html>